<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>注册</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<!--<div class="container">
    <p class="visible-xs img-responsive">小屏可见</p>
    <p  class="hidden-xs img-responsive">大屏可见</p>
</div>-->

<!--小屏幕显示-->
<div class="text-center visible-xs img-responsive" style="display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(https://static.zhihu.com/heifetz/assets/sign_bg.db29b0fb.png);
    background-repeat: no-repeat;
    background-color: #b8e5f8;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-size: auto 100%;">

    <div style="margin-top: 7em">
        <h1>我会Jvav啊</h1>
    </div>
    <div class="container"
         style="opacity: 0.95;width: 25em;margin-top: 3em;box-shadow: 0 1px 3px rgba(18,18,18,.1);background-color: aliceblue;border-radius: 15px;">
        <form class="form-signin" th:action="@{/register}" method="post">
            <h1 class="h3 mb-3 font-weight-normal">账号注册</h1>
            <!--权限重定向说明-->
            <span style="color: red" th:if="${#strings.equals(param.register,'false')}">用户名已存在</span>
            <input name="username" id="username2" onblur="forUsername2()" type="text"
                   style="margin-top: 1em"
                   class="form-control" placeholder="请输入用户名"
                   required="" autofocus="">
            <div id="userShow2">
            </div>
            <input name="password" type="password" style="margin-top: 1em" class="form-control"
                   placeholder="请输入密码"
                   required="">
            <button class="btn btn-lg btn-primary btn-block" style="margin-top: 1em" type="submit">注册</button>
        </form>
    </div>
    <footer style="width: 100%;
            height: 40px;
            position: absolute;
            bottom:0;
            left: 0;
            color: white">
        Copyright@2020-2020MinXuDesigened by MinXu
    </footer>
</div>

<!--大屏幕显示-->
<div class="text-center hidden-xs img-responsive" style="display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(https://static.zhihu.com/heifetz/assets/sign_bg.db29b0fb.png);
    background-repeat: no-repeat;
    background-color: #b8e5f8;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-size: 100% auto;">

    <div style="margin-top: 7em">
        <h1>我会Jvav啊</h1>
    </div>
    <div class="container"
         style="opacity: 0.95;width: 25em;margin-top: 3em;background-color: aliceblue;border-radius: 15px;">
        <form class="form-signin" th:action="@{/register}" method="post">
            <h1 class="h3 mb-3 font-weight-normal">账号注册</h1>
            <!--权限重定向说明-->
            <span style="color: red" th:if="${#strings.equals(param.register,'false')}">用户名已存在</span>
            <input name="name" onblur="forUsername1()" type="text"
                   style="margin-top: 1em"
                   class="form-control" placeholder="请输入昵称"
                   required autofocus="">
            <input name="username" id="username1" onblur="forUsername1()" type="text"
                   style="margin-top: 1em"
                   class="form-control" placeholder="请输入用户名"
                   required autofocus="">
            <div id=userShow1>
            </div>

            <input name="password" type="password" style="margin-top: 1em" class="form-control"
                   placeholder="请输入密码"
                   required>


            <button class="btn btn-lg btn-primary btn-block" style="margin-top: 1em" type="submit">注册</button>
        </form>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <footer class="text-center" style="width: 100%;
            height: 40px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(18,18,18,.1);
            color: black">
        备案/许可证编号为：鄂ICP备2020018205号 <br>
        Copyright@2020-2020MinXuDesigened by MinXu
    </footer>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script>

    function forUsername2() {
        $.ajax({
            type: "get",
            url: "/forUsername",
            data: {username: $("#username2").val()},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log(1);
                    document.getElementById("userShow2").innerHTML = "<span style=\"color: red\" class=\"glyphicon glyphicon-remove\">用户名已存在</span>";
                } else {
                    console.log(2);
                    document.getElementById("userShow2").innerHTML = "<span style=\"color: green\" class=\"glyphicon glyphicon-ok\">用户名可使用</span>";
                }
            }
        });
    }
    function forUsername1() {
        $.ajax({
            type: "get",
            url: "/forUsername",
            data: {username: $("#username1").val()},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log(1);
                    document.getElementById("userShow1").innerHTML = "<span style=\"color: red\" class=\"glyphicon glyphicon-remove\">用户名已存在</span>";
                } else {
                    console.log(2);
                    document.getElementById("userShow1").innerHTML = "<span style=\"color: green\" class=\"glyphicon glyphicon-ok\">用户名可使用</span>";
                }
            }
        });
    }

</script>


</html>